@charset "utf-8";
/**
 * Created by kroyo on 2017/12/6.
 * minxin 单选按钮、多选按钮
 */



//多选按钮
.check-wrap{
    display: inline-block;
    input{
        display: none;
    }
    label{
        font-size: 14px;
        color: $s6;
        @include transitions(.4s);
        cursor: pointer;
    }
    .check{
        display: inline-block;
        width: 16px;
        height: 16px;
        @include borradius(4px);
        border: 1px solid $borcolor;
        @include transitions(.4s);
        margin-right: 10px;
        vertical-align: -2px;
    }
    &:hover{
        label{
            color: $acolor;
        }
        .check{
            border-color: $acolor;
        }
    }
    //选中
    &.checked{
        .check{
            border-color: $acolor;
            background: url(../img/patent/icon-checked.png) no-repeat center;
            background-color: $acolor;
        }
    }
}







//单选按钮
.radio-wrap{
    display: inline-block;
    input{
        display: none;
    }
    label{
        cursor: pointer;
        font-size: 14px;
        color: $s6;
        vertical-align:middle; 
        @include transitions(.4s);
    }
    .check{
        position: relative;
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right:10px; 
        vertical-align:-2px; 
        &:after{
            position: absolute;
            top:25%;
            left: 25%;
            display: block;
            content: '';
            width: 50%;
            height: 50%;
            background-color: transparent;
            @include borradius(50%);
            @include transitions(.4s);
        }
        &:before{
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            content: '';
            width: 100%;
            height: 100%;
            border: 1px solid #ddd;
            @include borradius(50%);
            box-sizing: border-box;
            @include transitions(.4s);
        }
    }
    &:hover{
        label{
            color: $acolor;
        }
        .check:before{
            border-color:$acolor;
        }
    }
    input:checked~label{
        color: $acolor;
        .check{
            &:after{
                background-color: $acolor;
            }
            &:before{
                border-color:$acolor;
            }
        }
    }
}